<template>
  <div class="container mx-auto px-4 py-8">
    <div v-if="news" class="max-w-4xl mx-auto">
      <NuxtLink to="/" 
                class="inline-block mb-4 transition-colors"
                :class="colorMode.value === 'dark' ? 'text-blue-400 hover:text-blue-300' : 'text-blue-600 hover:text-blue-800'">
        ← 返回新闻列表
      </NuxtLink>
      <img :src="news.image" :alt="news.title" class="w-full h-96 object-cover rounded-lg mb-6">
      <h1 class="text-4xl font-bold mb-4" :class="colorMode.value === 'dark' ? 'text-white' : 'text-gray-900'">{{ news.title }}</h1>
      <div class="flex items-center mb-6" :class="colorMode.value === 'dark' ? 'text-gray-400' : 'text-gray-500'">
        <span>{{ news.date }}</span>
        <span class="mx-2">•</span>
        <span>{{ news.author }}</span>
      </div>
      <div class="prose max-w-none" :class="colorMode.value === 'dark' ? 'prose-invert' : ''">
        <p class="text-lg leading-relaxed" :class="colorMode.value === 'dark' ? 'text-gray-300' : 'text-gray-700'">{{ news.content }}</p>
      </div>
    </div>
    <div v-else class="text-center py-12">
      <p class="text-xl" :class="colorMode.value === 'dark' ? 'text-gray-400' : 'text-gray-600'">新闻不存在或已被删除</p>
    </div>
  </div>
</template>

<script setup>
const route = useRoute()
const news = ref(null)
const colorMode = useColorMode()

// 模拟从API获取新闻数据
const fetchNews = async (id) => {
  // 这里应该是实际的API调用
  const newsData = {
    id: parseInt(id),
    title: '科技创新推动经济发展',
    summary: '最新研究显示，人工智能和区块链技术正在重塑传统产业...',
    content: `人工智能和区块链技术正在以前所未有的速度改变着我们的生活方式和商业模式。从智能制造到金融服务，从医疗健康到教育培训，这些新兴技术正在各个领域掀起革命性的变革。

专家指出，随着技术的不断进步和应用场景的持续拓展，未来几年内，我们将看到更多创新性的解决方案出现。特别是在以下几个方面：

1. 智能制造升级
2. 金融服务创新
3. 医疗健康改善
4. 教育模式变革

这些变化不仅会提升效率，还将创造新的就业机会和经济增长点。`,
    image: 'https://picsum.photos/800/600',
    date: '2024-04-03',
    author: '张明'
  }
  return newsData
}

onMounted(async () => {
  try {
    news.value = await fetchNews(route.params.id)
  } catch (error) {
    console.error('获取新闻失败:', error)
  }
})
</script> 